<template>
  <div id="app">
    <h1>App组件</h1>
    <button @click="bus01">测试事件总线</button>
    <demo-01></demo-01>
    <demo-02></demo-02>

    <!-- <Category title="游戏">
      <template slot="youxi">
        <ul>
          <li v-for="(item,index) in gamesArr"
              :key="index">{{index}}-{{item.name}}-{{item.price}}</li>
        </ul>
      </template>
    </Category> -->

    <!-- <Category title="美食">
      <template slot="meishi">
        <ul>
          <img :src="imgUrl"
               alt="">
        </ul>
      </template>
    </Category> -->

    <!-- <Category title="音乐">
      <template slot="music">
        <ul>
          <li>
            <video src="imgUrl"
                   controls></video>
            <audio :src="musicUrl"
                   controls></audio>
          </li>
        </ul>
      </template>
    </Category> -->
  </div>
</template>

<script>
import Demo01 from "./components/Demo01.vue"
import Demo02 from "./components/Demo02.vue"
// import Category from "./components/Category.vue"
// import Category from "./components/Category02.vue"

export default {
  name: 'App',
  data () {
    return {
      gamesArr: [
        { id: 1001, name: "英雄联盟", price: 100 },
        { id: 1002, name: '绝地求生', price: 200 },
        { id: 1003, name: '王者农药', price: 300 },
        { id: 1004, name: "穿越火线", price: 400 }
      ],
      imgUrl: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0821%2F18d5fdfdj00qy6ott000oc000hs00bum.jpg&thumbnail=650x2147483647&quality=80&type=jpg",
      musicUrl: 'http://m10.music.126.net/20210822155929/4c891cf12e96106bddfc83ce269355d4/ymusic/a9c1/47f7/e72a/eeca0e403e1aa21dc60ca590be3db3f0.mp3',
    }
  },
  components: {
    Demo01,
    Demo02
    // Category
  },
  methods: {
    bus01 () {
      this.$EventBus.$emit("send01", "我是Demo01Son页面");
    }
  },
  mounted () {

  }
}
</script>

<style>
html,
body,
ul,
li {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-color: yellow;
  display: flex;
  justify-content: space-around;
}
</style>
